<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>编辑文章</h1>
    <form action="/update" method="post" enctype="multipart/form-data">
        <input type="hidden" id="id" name='id' value="">
        <input type="hidden" id="oldImg" name="oldImg" value="">
        <p>
            标题： <input type="text" id="title" name="title" autocomplete="off" src="">
        </p>
        <p>
            封面<input type="file" name="img" autocomplete="off" id="fengmian">
        </p>
        <p>
            封面浏览：
            <img src="" alt="" id="img" width="120px">
        </p>
        <p>
            作者： <input type="text" id="author" name="author" autocomplete="off">
        </p>
        <p>
            审核：
            <input type="radio" name="status" value='0'> 待审核
            <input type="radio" name="status" value='1'> 通过
            <input type="radio" name="status" value='2'> 失败
        </p>
        <p>
            所属分类：
            <select name="cat_id" id="cat_id">
                <option value="0">请选择</option>
                {{each cats item index}}
                <option value="{{item.cate_id}}">{{item.cate_name}}</option>
                {{/each}}
            </select>
        </p>
        <p>
            内容：
            <textarea name="content" id="content" cols="30" rows="10"></textarea>
        </p>
        <p>
            <button>确定更新</button>
        </p>
    </form>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- <script src="/static/js/edit.js"></script> -->
<script>
    window.onload = function () {
        let titleEle = document.getElementById('title')
        let idEle = document.getElementById('id')
        let authorEle = document.getElementById('author')
        let contentEle = document.getElementById('content')
        let statusEle = document.getElementsByName('status');
        let selectEle = document.getElementById('cat_id');
        let options = document.querySelectorAll('#cat_id option');
        let imgEle = document.getElementById('img');
        let oldImgEle = document.getElementById('oldImg');
        let fengmian = document.getElementById('fengmian');
        
        fengmian.onchange = function(){
            let file = this.files[0];
            let fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload =function(){
                imgEle.src = this.result;
            }
        }

        let id = "{{ article.id }}";
        let status = "{{ article.status }}";
        let cat_id = "{{ article.cat_id }}";
        
        let input = [...statusEle].find(item => item.value == status)
        input.checked = true;
        selectEle.value = cat_id;
        idEle.value = id;
        titleEle.value = "{{ article.title }}"
        authorEle.value = "{{ article.author }}"
        contentEle.value = "{{ article.content }}"
        oldImgEle.value = "{{ article.img }}"
        imgEle.src ="/{{ article.img}}"
        
        // $('#title').val('{{ article.title }}');
    }





    // window.onload = function(){
    //     // let titleEle = document.getElementById('title')
    //      // titleEle.value = "{{ article.title }}"
    //     // let idEle = document.getElementById('id')
    //     // let authorEle = document.getElementById('author')
    //     // let contentEle = document.getElementById('content')
    //     // let statusEle = document.getElementsByName('status'); 
    //     // let selectEle = document.getElementById('cat_id'); 
    //     // let options = document.querySelectorAll('#cat_id option');
    //     let id = "{{ article.id }}"; 
    //     let status = "{{ article.status }}"; 
    //     let cat_id = "{{ article.cat_id }}"; 
    //     let input = [...$("input[name='status']")].find( item=> item.value == status )
    //     input.checked = true;
    //     // selectEle.value = cat_id;
    //     // idEle.value = id;
    //     // authorEle.value = "{{ article.author }}"
    //     // contentEle.value = "{{ article.content }}"
    //     $('#title').val('{{ article.title }}');
    //     $('#id').val('id');
    //     $('#author').val('{{ article.author }}');
    //     $('#content').val('{{ article.content }}');
    //     $('#cat_id').val(cat_id);


    // }
</script>

</html>